<template>
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    background-color="#242731"
    text-color="#fff"
    router
    active-text-color="#ffd04b"
  >
    <el-menu-item index="/server">
      <span slot="title">链接测试</span>
    </el-menu-item>

    <!-- 在外层用template包裹并将 v-for指令绑定在template标签里在元素里绑定key属性 -->
    <template v-for="(item, index) in messages">
      <el-menu-item
        v-if="item.value != '' && item.address == index"
        :key="index"
        :index="item.router"
        @click="onclick(item.router)"
      >
        <div style="overflow: hidden; text-overflow: ellipsis">
          <span slot="title">{{ item.wenben }}</span>
        </div>
        <i
          class="el-icon-close"
          @click="close(100 + index)"
          style="position: absolute; top: 35%; left: 85%"
        ></i>
      </el-menu-item>
    </template>

    <!-- 
			  <el-menu-item index="index5" v-if="messages[0].address == 0" style="width: 198px;  position: relative; ">
				  <div style="overflow: hidden; text-overflow: ellipsis;">
					  <span slot="title" style="overflow: hidden;">{{ messages[0].value }}</span>
				  </div>
			     
				 <i class="el-icon-close"  @click="close(100)" style="position: absolute; top: 35%; left: 85%;"></i>
			   </el-menu-item>
			  
			
			   <el-menu-item index="" v-if="messages[1].address == 1" style="width: 198px; :  position: relative;" >
				  <i class="el-icon-close" style="position: absolute; top: 35%; left: 85%;" @click="close(100+1)"></i>
				  <div style="overflow: hidden; text-overflow: ellipsis;">
					   <span slot="title">{{ messages[1].value }}</span>
				  </div>
				</el-menu-item> -->

    <el-menu-item index="index4">
      <span slot="title">添加属性</span>
    </el-menu-item>

    <el-menu-item index="index5">
      <span slot="title">后期处理体积</span>
    </el-menu-item>

    <el-menu-item index="DirectionalLight">
      <span slot="title">太阳</span>
    </el-menu-item>

    <el-menu-item index="index2">
      <span slot="title">BP天光</span>
    </el-menu-item>

    <el-menu-item index="BodyMap">
      <span slot="title">实体位置</span>
    </el-menu-item>

    <el-menu-item index="ImgMap">
      <span slot="title">图片实体位置</span>
    </el-menu-item>

    <el-menu-item index="Upload">
      <el-button type="primary"
        >上传<i class="el-icon-upload el-icon--right"></i
      ></el-button>
    </el-menu-item>

    <el-submenu v-show="mark" index="equipment">
      <template slot="title">设备一</template>
      <el-menu-item index="PlayTime">播放时间设置</el-menu-item>
      <el-menu-item index="PlaySetup" ref="switchSet"
        >播放切换设置</el-menu-item
      >
      <el-menu-item index="PlaySetup">
        <el-button type="info" round v-show="mark" @click="toggle"
          >显示</el-button
        >
      </el-menu-item>
    </el-submenu>

    <el-submenu v-if="mark_" index="equiment">
      <template slot="title">设备二</template>
      <el-menu-item index="1-4-1">播放时间设置</el-menu-item>
      <el-menu-item index="1-4-1">播放切换设置</el-menu-item>
    </el-submenu>
    <!-- <el-menu-item index="BodyMap" >
			      <span slot="title">设备一</span>
			    </el-menu-item>
				<el-menu-item index="BodyMap" >
				    <span slot="title">设备二</span>
				  </el-menu-item>
 -->
    <!-- <el-button type="success" plain @click="toggle" id="toggle">显示</el-button> -->
    <!-- <el-button type="info" round v-show="mark" @click="toggle">显示</el-button> -->
  </el-menu>
</template>

<script>
import Bus from "./eventBus";
export default {
  name: "Aside",
  data() {
    return {
      flag: true,
      mark: false,
      mark_: false,
    };
  },
  created() {
    // 监听 inputIp.vue 组件中的 toggleButton 事件
    Bus.$on("toggleButton", (data) => {
      this.mark = data;
      // console.log(this.$refs.switchSet.$el);
      // this.$refs.switchSet.$el.click()
    });
    let data = sessionStorage.getItem("equipmentIp");
    data ? (this.mark = true) : (this.mark = false);
  },

  mounted() {},

  computed: {
    messages() {
      return this.$store.state.address;
    },
  },

  methods: {
    onclick(n) {
      this.$router.push({
        path: n,
        query: {
          name: n,
        },
      });
    },
    close(item) {
      let upaddress = item - 100;
      let index = this.$store.state.address[upaddress];
      index.address = 998;
    },

    toggle(e) {
      // e.target.innerHTML = '隐藏'
      this.flag = !this.flag;
      if (this.flag) {
        e.target.innerHTML = "显示";
      } else {
        e.target.innerHTML = "隐藏";
      }

      // 触发 videoplayerlist.vue 中 的 qiehuan 事件
      Bus.$emit("qiehuan", !this.flag);
    },
  },

  // props: ['index']
};
</script>

<style>
.el-menu-item {
  min-width: 199px;
  font-size: 18px;
}

.el-icon-close {
  position: relative;
  top: 0px;
  right: 0px;
}

.el-menu {
  border-right: 0 !important;
}

.el-submenu__title {
  font-size: 18px;
}

.el-button.is-round {
  width: 120px;
  height: 36px;
  border-radius: 18px;
}
</style>